<template>
  <div>
    <van-tabs @click="changeTab">
      <van-tab
        v-for="(item, index) in cateList"
        :key="index"
        :title="item.title"
        :name="item._id"
      >
      </van-tab>
    </van-tabs>
    <van-grid :column-num="2">
      <van-grid-item
        v-for="(item, index) in goods_list"
        :key="index"
        @click="$router.push('/mnA/inxq?id=' + item._id)"
      >
        <van-image :src="item.pic" />
        <p>{{ item.title }}</p>
        <p>
          ￥{{ item.price }}.00
          <van-icon
            name="cart-o"
            style="font-size: 24px"
            @click.stop="addCart(item)"
          />
        </p>
        <van-button type="danger" style="width: 70%" @click.stop="remove(index)"
          >删除</van-button
        >
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script>
export default {
  props: ["goodsList"],
  data() {
    return {
      cateList:[],
      cid: "",
    };
  },
  created(){
      this.fenlei();
  },
  methods: {
    //加入购物车
    addCart(goods) {
      this.$emit("addCart", goods);
    },
    //删除的方法
    remove(index) {
      this.$emit("del", index);
    },
    //获取分类的数据
    fenlei(){
      this.$axios.get('/json/fenlei.json').then(res=>{
        console.log(res.result);
        this.cateList = res.result;
      })
    },
    changeTab(name) {
      console.log(name);
      this.cid = name;
    },
  },
  computed: {
    goods_list() {
      let goodsList = this.goodsList;
      if(this.cid == ""){
        return goodsList;
      }
      // console.log(goodsList);
      return goodsList.filter((item) => {
        return item.cid == this.cid;
      });
    },
  },
};
</script>